﻿@model string
@Html.Extra()
@{
    Layout = "~/Views/Shared/OA/_Edit.cshtml";
}
@section Toolbar
{
    @Html.MyNet().Button(new ButtonOptions { Text = "保存", Click = "save" })
    @Html.MyNet().Button(new ButtonOptions { Text = "返回", Click = "back" })
}
@section Main
{
    @Html.Hidden("Id",Model)
    <span class="k-widget k-dropdown k-header" id="s9qhjo5d9k5kll7k">
        <span class="k-dropdown-wrap k-state-default"><span class="k-input">选择栏目</span> <span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span></span><input id="CatalogIds" name="CatalogIds" type="hidden" value="@ViewBag.CatalogIds" />
        <script>
            jQuery(function () {
                $("body").append("<div id=\"s9qhjo5d9k5kll7k_popup\" style=\"display: none; position: absolute; z-index: 1000;\"><span class=\"popup\"><div class=\"k-popup k-list-container\" style=\"border-top: none;\"><div class=\"optionLabel\">选择栏目</div><div style=\"padding: 0 5px;\"><div class=\"dropList\" style=\"height: 100%;\"></div></div></div></span></div>")

                var control = $("#s9qhjo5d9k5kll7k");
                var popup = $("#s9qhjo5d9k5kll7k_popup");
                var hidden = control.find(":hidden");
                var input = control.find(".k-input");

                var dataSource;
                var treeView;
                var dataBound = false;

                var url = "/cms/catalog/ReadForParents?parentKeys=sy,xzt&Paging=false&ResultType=Json";
                var inputValueType = "String";
                var inputValue = "";
                var ids = [];
                var texts = [];

                var bind = function () {
                    var idsString = "";
                    ids = [];
                    texts = [];
                    if (inputValueType == "Json") {
                        inputValue = $("#s9qhjo5d9k5kll7k").find(":hidden").val();
//alert(inputValue)
                        if (inputValue.length > 0) {
                            var json = eval('(' + inputValue + ')');
                            $.each(json, function (index, item) {
                                ids.push(item.Id);
                            });
                        }
                        if (ids.length > 0) {
                            idsString = ids.join(',');
                        }
                    } else if (inputValueType == "String") {
                        idsString = $("#s9qhjo5d9k5kll7k").find(":hidden").val();
                    }
                    idsString = ("," + idsString + ",").toLowerCase();

                    popup.find(":checkbox").each(function () {
                        $(this).attr('checked', false);
                        if (idsString.indexOf("," + $(this).val() + ",") >= 0) {
                            $(this).attr('checked', true);
                            texts.push($(this).attr("text"));
                        }
                    });

                    input.text(texts.length > 0 ? texts.join(',') : popup.find(".optionLabel").html());
                    input.attr("title", input.text());
                };

                hidden.change(function () {
                    bind();
                });

                $(document).click(function () {
                    popup.hide();
                });
                control.click(function (event) {
                    event.stopPropagation()
                    popup.toggle();
                    popup.css("top", control.offset().top + 25);
                    popup.css("left", control.offset().left);
                    popup.css("width", control.width());
                });
                popup.find(".k-popup").click(function (event) {
                    event.stopPropagation()
                });
                popup.find(".optionLabel").click(function (event) {
                    input.text(popup.find(".optionLabel").html());
                    control.find(":hidden").val("");
                    popup.find(":checkbox").each(function () {
                        $(this).attr('checked', false);
                    });
                    popup.find("span.k-state-selected").removeClass("k-state-selected");
                    popup.find("span.k-state-focused").removeClass("k-state-focused");
                    popup.hide();
                });

                dataSource = new kendo.data.HierarchicalDataSource(
                    {
                        transport: { read: url },
                        schema:
                        {
                            data: "Data",
                            model: { id: "id" },
                            errors: "Errors"
                        },
                        error: function (e) {
                            alert(e.errors);
                        }
                    });

                treeView = popup.find(".dropList").kendoTreeView(
                    {
                        dataSource: dataSource,
                        dataTextField: "text",
                        checkboxes: { template: "<input type='checkbox' value='#=item.id#' text='#=item.text#' />" },
                        select: function (e) {
                            treeView.expand(e.node);
                            if ($(e.node).find(":checkbox").attr("checked") == "checked") {
                                $(e.node).find(":checkbox").attr('checked', false);
                            }
                            else {
                                $(e.node).find(":checkbox").attr('checked', true);
                            }
                            treeView.unselect();
                        },
                        dataBound: function () {
                            if (dataBound) return;
                            dataBound = true;
                            treeView.collapse(".k-item");

                            bind();

                            popup.find(".k-checkbox,.k-in").unbind("click")
                            popup.find(".k-checkbox,.k-in").click(function () {
                                setTimeout(function () {
                                    var items = [];
                                    ids = [];
                                    texts = [];
                                    popup.find(":checkbox").each(function () {
                                        if ($(this)[0].checked) {
                                            items.push({ Id: $(this).val(), Text: $(this).attr("text") });
                                            ids.push($(this).val());
                                            texts.push($(this).attr("text"));
                                        }
                                    });

                                    if (inputValueType == "Json") {
                                        hidden.val(items.length == 0 ? "" : JSON.stringify(items));
                                    }
                                    else if (inputValueType == "String") {
                                        hidden.val(ids.length > 0 ? ids.join(',') : "");
                                    }
                                    input.text(texts.length > 0 ? texts.join(',') : popup.find(".optionLabel").html());
                                    input.attr("title", input.text());
                                }, 1);
                            });
                        }
                    }).data("kendoTreeView");
            });
        </script>
    </span>

}
<style>
    .form label { margin-right: 5px; }
    .form .k-textbox { width: 200px; margin-right: 5px; }
    .k-numerictextbox { margin-right: 5px; }
</style>
<script>
    function save() {
        var form = $("form");

        if (!$('#CatalogIds').val())
            return alert('请选择栏目');

        $.ajax
            ({
                url: form.attr("action"),
                data: form.serialize(),
                type: "post",
                error: disposeError,
                success: function (result) {
                    if (disposeException(result)) return;
                    back(true);
                }
            });
    }

</script>
